<template>
    <div class="index">
        <div class="header">
            <span>未出行订单</span>
        </div>
        <div class="searchResultCount">
            <span>&nbsp;&nbsp;查询结果(1)</span>
        </div>
        <div class="orderItem" @click="toDetail">
            <el-row type="flex">
                <el-col :span="6" class="title">
                    <el-row>订单号：</el-row>
                    <el-row>车次信息：</el-row>
                    <el-row>订单时间：</el-row>
                </el-col>
                <el-col :span="18" class="desc">
                    <el-row type="flex">
                        <el-col :span="20">EG82346458</el-col>
                        <el-col :span="4" style="color: #000;">褚达</el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="24">09月30日 08:00开 上海虹桥-杭州东</el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="16" style="color: #000">2018年09月14日 11:17</el-col>
                        <el-col :span="8" style="color: #a6a6a6;">总张数：<span style="color: #d52939;">1</span></el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <div class="loadMore">
            <span>点击加载更多</span>
        </div>
        <!--<img src="http://img01.200001.cn/FkKyQ6txPPeA-4vLlFivpiciAt9r"/>-->
    </div>
</template>

<script>
    export default {
        name: 'index',
        methods: {
            toDetail () {
                console.log('test ok');
                this.$router.push({path: `/detail`});
            }
        }
    }
</script>
<style lang='less'>
    .index{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
    .header {
        width: 100%;
        height: 40px;
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        background-color: #3b99fb;
    }

    .loadMore {
        width: 100%;
        height: 40px;
        color: #a6a6a6;
        font-size: 13px;
        text-align: center;
        line-height: 40px;
    }

    .searchResultCount {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #000;
        background-color: #f0eff5;
    }

    .orderItem {
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #e0e0e0;
        border-top: 1px solid #e0e0e0;
    }

    .title * {
        color: #a6a6a6;
        font-size: 14px;
    }

    .desc * {
        color: #477a8d;
    }
</style>

